<template>
  <div class="category">
    <div class="category-left">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item
          v-for="category in categories"
          :key="category.id"
          :title="category.name"
          :to="`/category/sub-category/${category.id}`"
        />
      </van-sidebar>
    </div>
    <div class="category-right">
      <router-view />
    </div>
  </div>
</template>

<script>
import { getCategories } from '@/api/category'
export default {
  name: 'Category',
  data() {
    return {
      activeKey: 0,
      categories: [],
    }
  },
  created() {
    getCategories()
      .then(data => {
        this.categories = data.list.slice(1)
        // 主分类数据获取后，查询第一个主分类下的子分类数据
        // 向子分类页面跳转：/category/sub-category/
        // 编程式的导航：
        this.$router.push('/category/sub-category/' + this.categories[0].id)
      })
      .catch(err => console.log('异常：', err))
  },
}
</script>

<style lang="less" scoped>
  .category {
    display: flex;
    height: 100%;
    &-left {
      width: 160px;
      height: 100%;
    }
    &-right {
      flex: 1;
    }
  }
</style>
